<template>
  <!-- 告警页面 告警设备类型 区块 -->
  <div class="bottom_section">
    <div class="alarmDeviceOut">
      <div id="alarmDevice"></div>
    </div>
    <div class="tableCount">
      <div class="alarm-device-table">
        <div class="th">
          <div class="td">
            设备类型
          </div>
          <div class="td">
            累计告警次数
          </div>
        </div>
        <div v-if="alarmTypeList.length" class="tbody">
          <div v-for="item in alarmTypeList" :key="item.device_type" class="tr" @click="openAlarmModal(item.name)">
            <div class="td">
              {{item.name}}
            </div>
            <div class="td">
              {{item.total}}
            </div>
          </div>
        </div>
        <div v-else class="nothing">
          暂无数据
        </div>
      </div>
   </div> 
  </div>
</template>
<script>
import { mapState } from 'vuex'
import {
  format
} from 'silly-datetime'
import * as api from '@/api'
import { project_id } from '@/consts/consts'
import { alarmDevicePie } from '@/consts/chartAlarmDevice'
let myChart = null
export default {
  data() {
    return {
      alarmTypeList: []
    }
  },
  watch: {
    alarmDateRange(val) {
      this.alarmDeviceTypeTotal()
    }
  },
  computed: {
    ...mapState(['alarmDateRange'])
  },
  methods: {
    openAlarmModal(type) {
      this.$store.commit('setState', {
        name: 'alarmModalVisable',
        value: true
      })
      this.$store.commit('setState', {
        name: 'alarmDeviceType',
        value: type
      })
    },
    
    drawPie() {
      myChart = this.$echarts.init(document.getElementById('alarmDevice'))
      const seriesData = this.alarmTypeList.map(item => {
        return {
          name: item.name,
          value: item.total
        }
      })
      const opt = alarmDevicePie(seriesData)
      myChart.setOption(opt)
      myChart.on('click', (e) => {
        this.openAlarmModal(e.name)
      })
      myChart.resize()
    },
    
    getParams() {
      const [start='', end=''] = this.alarmDateRange
      let params = {
        project_id,
        branch_number: this.$route.query.branch_number,
      }
      if (start) {
        params.time_start = format(start, 'YYYY-MM-DD')
      }
      if (end) {
        params.time_end = format(end, 'YYYY-MM-DD')
      }
      return params
    },

    // 4.12.8、按项目设备类型分组查询设备类型告警总数
    async alarmDeviceTypeTotal() {
      let params = this.getParams()
      const { code, data } = await api.alarmmanage.alarmDeviceTypeTotal(params)
      if (code === 0) {
        this.alarmTypeList = data
        this.drawPie()
      }
    },
  },
  created () {

  },
  mounted() {
    this.alarmDeviceTypeTotal()
    window.addEventListener('resize', this.drawPie)
  },
  beforeDestroy() {
    window.removeEventListener('resize', this.drawPie)
  }
}
</script>
<style lang="stylus">
.bottom_section {
  height: calc(100% - 3.166666666666667vw);
  width: 100%;
  flexMiddle(space-between);
  .alarmDeviceOut{
      height: getPx(300);
      width: 50%;
    #alarmDevice {
      height: 100%;
      width: 100%;
    }
  }
  @media screen and (max-height:$h){
    .alarmDeviceOut{
      height:getPx(275);
    }
  }  
  .tableCount {
    flex: 1;
    height: 100%;
    text-align:center;
    display:flex;
    align-items:center;
    .alarm-device-table {
      width: getPx(242);
      font-size: $sm-font-size;
      margin: 0 auto;
      .th {
        flexMiddle(space-between);
        color: $sec-title-color;
        height: getPx(40);
        background: #2d3f55;
        padding: 0 getPx(25);
      }
      .tbody {
        height: auto;
        max-height:getPx(200)
      }
      .tr {
        flexMiddle(space-between);
        color: $sec-title-color;
        height: getPx(40);
        padding: 0 getPx(25);
        cursor: pointer;
        &:nth-of-type(even) {
          background: #2d3f55;  
        }
        &:nth-of-type(1n) {
          color: $primary;  
        }
        &:nth-of-type(2n) {
          color: $success;  
        }
        &:nth-of-type(3n) {
          color: $warn;  
        }
        &:nth-of-type(4n) {
          color: $grey;  
        }
        &:nth-of-type(5n) {
          color: #947EB5;  
        }
      }
    }
  }
  .nothing {
    height: getPx(40);
    font-size: $sm-font-size;
    background: $sec-dark-bg;
    flexMiddle(center);
  }
}
</style>